<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
        img {
            height: 100px;
            width: 100px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="">
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品图片</th>
                <th>商品库存</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, i) in items">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td><img v-bind:src="item.imgSrc" /></td>
                <td>{{ item.num }}</td>
                <td><button @click="del(i)">删除</button></td>
            </tr>
        </table>
        <div style="max-width: 400px; margin: 0 auto;">
            <label for="name">商品名称:</label>
            <input type="text" id="name" v-model="name" /><br/>
            <label for="price">商品价格:</label>
            <input type="text" id="price" v-model="price" /><br/>
            <label for="imgSrc">图片地址:</label>
            <input type="text" id="imgSrc" v-model="imgSrc" /><br/>
            <label for="num">商品库存:</label>
            <input type="text" id="num" v-model="num" /><br/>
            <button @click="add">添加</button>
        </div>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    name: '',
                    price: '',
                    imgSrc: '',
                    num: '',
                    items: [
                        {
                            id: 1,
                            name: "iPhone 14",
                            price: 8888,
                            imgSrc: "./img/iphone14.jpg",
                            num: 3
                        },
                        {
                            id: 2,
                            name: "华为 Mate 6",
                            price: 8888,
                            imgSrc: "./img/mate40.jpg",
                            num: 3
                        }
                    ]
                }
            },
            methods: {
                add: function () {
                    this.items.push({
                        id: this.items.length + 1,
                        name: this.name,
                        price: this.price,
                        imgSrc: this.imgSrc,
                        num: this.num
                    });
                },
                del: function (i) {
                    this.items.splice(i, 1);
                }
            }
        }).mount("#app");
    </script>
</body>
</html>